<template>
  <div>
    <!-- 顶部栏 -->
    <van-nav-bar title="首页" placeholder fixed />
    <!-- 搜索框 -->
    <van-search
      v-model="SeachInpt"
      shape="round"
      show-action
      placeholder="请输入搜索关键词"
      @search="seachFn()"
    >
      <template #action>
        <van-button type="primary" size="small" @click="seachFn()">搜索</van-button>
      </template>
    </van-search>
    <!-- 轮播图--后台没数据 -->
    <!-- <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image.bannerid">
        <img :src="image.img" class="swipe-img" />
      </van-swipe-item>
    </van-swipe> -->
    <!-- 商品内容部分 -->

    <van-row :gutter="[6, 10]" class="goods">
      <van-col
        span="12"
        v-for="item in PruListData"
        :key="item.id"
        @click="onProductClick(item.id)"
      >
        <van-card
          :price="item.price"
          :desc="item.desc"
          :title="item.name"
          :thumb="item.coverImage"
        />
      </van-col>
    </van-row>
    <!-- 分页器 -->
    <van-pagination
      v-model="currentPage"
      :total-items="total"
      :items-per-page="10"
      :show-page-size="3"
      :force-ellipses="true"
      id="Paging"
      @change="changePage($event)"
    />
  </div>
</template>

<script setup>
import { getProductListReq } from '@/api/Produc'
// import { getProductListReq, getBannersReq } from '@/api/Produc'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const currentPage = ref(1)

let PruListData = ref([]) //商品数据
let total = ref(0) //总商品数，用于分页
let SeachInpt = ref('') //搜索框内输入

// let images = ref([]) //轮播图

//获取所有数据
function getProListData() {
  //后台没数据
  // getBannersReq().then((res) => {
  //   images.value=res.data
  //   console.log('轮播图：',res.data)
  // })

  getProductListReq().then((res) => {
    PruListData.value = res.data.data
    total.value = res.data.total
    // console.log(res.data)
  })
}
getProListData()

//换页
function changePage(page) {
  // console.log('页码:', page)
  getProductListReq(page).then((res) => {
    PruListData.value = res.data.data
    // console.log('分页', res.data)
  })
}
//搜索
let router = useRouter()
function seachFn() {
  if (SeachInpt.value.trim() !== '') {
    router.push('/search?keyword=' + SeachInpt.value)
    SeachInpt.value = ''
  }
}
//点击商品
function onProductClick(id) {
  router.push('/detail?id=' + id)
}
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: white;
}

.goods {
  margin: 0 6px;
  padding-bottom: 6vh;
}

#Paging {
  position: fixed;
  width: 100%;
  bottom: 50px;
  left: 0;
}

.swipe-img {
  width: 100%;
}
</style>
